import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Avatar, Button, Card, List } from "antd";
import * as React from "react";
import { Link } from "react-router-dom";
import doctorImage from "../../images/doctor_bg.png";
import { DoctorData } from "../../type/DoctorData";

const styles = (theme: Theme) =>
  createStyles({
    root: {
      marginTop: "10px",
      marginLeft: "10px"
    },
    doctorCard: {
      display: "flex",
      alignItems: "middle",
      "& div": {
        marginLeft: "10px",
        marginRight: "10px"
      },
      "& .middle": {
        flexGrow: 1
      },
      "& .doctorName": {
        fontSize: "16px",
        fontWeight: "bold",
        marginRight: "20px"
      }
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  data: DoctorData[];
  title: string;
}
/**
 * 推荐医生的列表组件
 */
class RecommendUser extends React.Component<Iprops> {
  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <Card title={this.props.title}>
          <List
            dataSource={this.props.data}
            size={"large"}
            itemLayout={"vertical"}
            split={true}
            renderItem={(item: DoctorData) => (
              <List.Item>
                <div className={classes.doctorCard}>
                  <div>
                    <Avatar src={doctorImage} size={80} />
                  </div>
                  <div className={"middle"}>
                    <p>
                      <span className={"doctorName"}>{item.name}</span>
                      <span>{item.title}</span>
                    </p>
                    <p>{item.depart}</p>
                  </div>
                  <div>
                    <Button>
                      <Link to={`/order-doctor/doctor-detail/${item.id}`}>
                        去挂号
                      </Link>
                    </Button>
                  </div>
                </div>
              </List.Item>
            )}
          />
        </Card>
      </div>
    );
  }
}

export default withStyles(styles)(RecommendUser);
